<template>
  <div class="houseRent content-box">
    <!-- <el-card class="content-top"> -->
      <p class="Rent">房屋租赁</p>
      <div class="screenCondition">
        <div>
          <el-form :model="screenForms" label-width="90px" class="form">
            <el-form-item label="房屋面积：" class="area">
              <!-- <el-radio-group v-model="screenForms.projectArea"> -->
                <el-radio v-model="screenForms.projectArea" :label="projectAreaList1">≤70㎡</el-radio>
                <el-radio v-model="screenForms.projectArea" :label="projectAreaList2">70m²-120m²</el-radio>
                <el-radio v-model="screenForms.projectArea" :label="projectAreaList3">120m²-200m²</el-radio>
              <!-- </el-radio-group> -->
            </el-form-item>
            <el-form-item label="单价：" class="area">
              <el-checkbox-group v-model="screenForms.projectUnitPrice">
                <el-checkbox :label="13">13 元/㎡</el-checkbox>
                <el-checkbox :label="15">15 元/㎡</el-checkbox>
                <el-checkbox :label="20">20 元/㎡</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="朝向：" class="area">
              <el-checkbox-group v-model="screenForms.projectDirection">
                <el-checkbox v-for="(item ,i) in projectDirctionObj" :key="i" :label="item.value">{{item.description}}</el-checkbox>
                <!-- <el-checkbox :label="1">朝南</el-checkbox> -->
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="screen">
              <el-button size="mini" type="primary" @click="bolting">筛选</el-button>
              <el-button size="mini" @click="reload">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    <!-- </el-card> -->
    <div class="content-bottom">
      <div>
        <el-checkbox class="all-checked" v-model="allChecked" @change="toggleSelection">全选</el-checkbox>
        <div class="selectAll">
        
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            :show-header="false"
            @toggleAllSelection="toggleAllSelection"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <div class="housingIntroduced">
                  <div class="housingIntroduced-left">
                    <img v-if="scope.row.projectImage" :src="scope.row.projectImage" alt class="jdp" />
                    <img v-else src="@/assets/ssss.webp" alt class="jdp" />
                    <div class="characters">
                      <p class="biaoti">
                        <!-- <span v-if="scope.row.buildingType == 'complex_building'">形象店</span>
                        <span v-else-if="scope.row.buildingType == 'exhibition'">综合楼</span> -->
                        <span>  {{ projectBuidongTypeObj[scope.row.buildingType] }}</span>
                        <span>
                          {{ complexBuildingObj[scope.row.projectRegionId] }}
                          </span>
                        <span> · </span>
                        <span>{{ scope.row.projectName }}</span>
                        <span> · </span>
                        <!-- <span v-if="scope.row.projectDirection == 1">朝南</span>
                        <span v-else-if="scope.row.projectDirection == 2">朝北</span>
                        <span v-else></span> -->
                        
                        <span v-for="(item ,i) in projectDirctionObj" :key="i" >
                          <span v-if="item.value == scope.row.projectDirection">
                              {{ item.description }}
                          </span>
                        </span>
                        <span class="discounts" v-if="coupons">
                          {{sysCouponInfoname}}
                        </span>
                      </p>
                      <!-- <p>{{ scope.row.title }}</p> -->
                      <!-- <p>发布时间：{{ scope.row.createDate }}</p> -->

                      <p class="leixin">
                        <!-- <span v-if="scope.row.buildingType == 'complex_building'">房产类型：形象店</span>
                        <span v-else-if="scope.row.buildingType == 'exhibition'">房产类型：综合楼</span>
                        <span v-else>房产类型：展场</span> -->
                        <span>房产类型：  {{ projectBuidongTypeObj[scope.row.buildingType] }}</span>
                        <span class="span">/</span>
                        楼号：{{ complexBuildingObj[scope.row.projectRegionId] }}<span class="span">/</span>
                        楼层：{{ scope.row.projectFloorNumber }}层<span class="span">/</span>
                        房号：{{ scope.row.projectName }}<span class="span">/</span>
                        面积：{{ scope.row.projectArea }}㎡</p>
                      <!-- <p>面积：{{ scope.row.projectArea }}㎡</p> -->
                      <div class="stages">
                        <span>
                          <div style="float:left">
                          <span
                            v-for="(item3, i3) in installment"
                            :key="i3"
                            class="installment"
                            >{{ item3 }}</span>
                          </div>
                            <!-- <span>1</span> -->
                          <div style="float:left"><a
                            v-for="(item4 ,keys)  in bazaar"
                            :key="keys"
                            class="bazaar"
                            :href="item4.remarks"
                            >{{ item4.label }}</a>
                            </div>
                          <!-- <span class="bazaar">保洁</span>
                          <span class="bazaar">宽带办理</span>
                          <span class="bazaar">更多></span> -->
                          <!-- <el-button type="text" class="bazaar">更多></el-button> -->
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="housingIntroduced-rgiht">
                    <p class="headline">
                      <span class="price">{{ scope.row.projectUnitPrice }}元</span
                      >/㎡.月
                    </p>
                    <p  class="discounts">
                      发布时间：<span>{{ splits(scope.row.createDate)  }}</span>
                    </p>
                    <!-- <p class="headline">
                      单价：
                      <span class="price">{{ scope.row.projectUnitPrice }}</span
                      >/㎡,月
                    </p>
                    <p>
                      优惠活动：
                      <span class="discounts">优惠券</span>
                    </p>
                    <p>
                      市场服务：
                      <span class="marketService">服务</span>
                    </p> -->
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="paginationdiv">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="suspensionAll">
      <div class="suspension">
        <div class="suspension-left">
          <el-checkbox v-model="allChecked" @change="toggleSelection">全选</el-checkbox>
          <span style="margin-left:50px">已选中房屋<span style="color: #E87224;">{{ floornum }}</span>间</span>
          <span style="margin-left:15px">房屋总面积<span style="color: #E87224;">{{ totalArea }}</span>㎡</span>
        </div>
        <div class="suspension-right">
          <el-button size="mini" type="primary" @click="consult">电话咨询</el-button>
          <el-button size="mini" type="primary" @click="handleShow">预约看房</el-button>
          <el-button size="mini" type="primary" @click="confirm">确认订房</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="预约信息" destroy-on-close :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div class="iscenter">
        <el-form ref="form" :model="form" :label-position="labelPosition"  :rules="rules">
           <div class="formsty">
              <el-form-item label="预约人姓名:" prop="appointmentName" label-width="100px">
                  <el-input v-model="form.appointmentName" style="width:80%"></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" prop="appointmentPhone" label-width="100px">
                  <el-input v-model="form.appointmentPhone" style="width:80%"></el-input>
                </el-form-item>
              <el-form-item label="预约时间:" prop="appointmentDate" label-width="100px">
                <el-date-picker v-model="form.appointmentDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:80%; margin-left:0;"> </el-date-picker>
              </el-form-item>
                <el-form-item label="预约房屋:" label-width="100px">
                <div>
                  <span class="housingContract" v-for="(item, i) in lookApartment" :key="i">{{ item }}</span>
                </div>
                </el-form-item>
           </div>
           <div class="bnt">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
           </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="电话咨询" :visible.sync="isconsult" width="25%" class="centerx"   :before-close="consultClose">
      <div style=" height: 50px;text-align: center; position: relative;">
        <div class="isconsulty"><H3>请拨打客服电话<i class="el-icon-phone">:</i>029-8848421</H3></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/store.js'
export default {
  data() {
    return {
      /* 接口测试data */
      current: 1,
      total: 0,
      labelPosition:'right',
      allChecked: false /* 全选框 */,
      isconsult: false,
      dialogVisible: false /* 控制看房的表单 */,
      // screenForm: {
      //   /* 房屋租赁的查询 */
      //   buildingType: 'complex_building',
      //   projectDirection: [2],
      //   projectUnitPrice: [13, 15],
      //   projectArea: [70, 80]
      // },
      multipleSelection: [],
      complexBuildingObj:[],
      projectBuidongTypeObj:[],
      screenForms: {
        /* 房屋租赁的查询 */
        buildingType: 'complex_building',
        current: 1,
        projectUnitPrice: [],
        projectArea: [],
        projectDirection: []
      },
      projectAreaList1:[70],
      projectAreaList2:[70,120],
      projectAreaList3:[120,200],
      // InspectingHouse: [] /* 选中项的信息 */,
      lookApartment: [] /* 选中项总和 */,
      form: {
        /* 预约看房商户的信息 */
        buildingType: 'complex_building',
        appointmentName: '',
        appointmentPhone: '',
        appointmentDate: '',
        companyName: '',
        userType: '',
        companyId: '',
        projectIds: []
      },
      floornum: 0 /* 选中房间总数 */,
      totalArea: 0 /* 选中房间总面积 */,
      installment:['x%x3期', 'x%x6期', 'x%x12期'],
      sysCouponInfo:[],
      dict:[],
      projectDirctionObj:[],
      sysCouponInfoname:'',
      bazaar: ['保洁', '宽带办理'],
      tableData: [],
      
      coupons: false,
      chooesHoseId: [],
      isauth: '',
      // 校验规则
      rules: {
        appointmentName: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        appointmentPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        appointmentDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },

  created() {
    this.HousesLists()
    this.isauths()
    this.coupon()
    this.dictionaries()
    this.marketService()
    this.complexbuilding()
    this.reasonsrefund()
    this.projectDirction()
  },
  filters:{
    towNumber(val) {
      return val.toFixed(2)
    }
  },
  methods: {
    async projectDirction(){
      let that = this;
      let type= 'rm_project_dirction';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口rm_project_dirction');
      console.log(res);
      this.projectDirctionObj = res.data;
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    async complexbuilding(){
      let that = this;
      let type= 'complex_building';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口complex_building');
      console.log(res);
      res.data.forEach(row => {
          this.complexBuildingObj[row.value] = row.description;
      });
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    async reasonsrefund(){
      let that = this;
      let type= 'rm_project_buiding_type';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口rm_project_buidong_type');
      console.log(res);
      res.data.forEach(row => {
          this.projectBuidongTypeObj[row.value] = row.description;
      });
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    splits(createDate){
      let arr = createDate.split(" ");
      return arr[0];
    },
    selectable(row ){
      if((row.projectStatus == 1) || (row.projectStatus == 3)){
        return false;
      }else{
        return true;
      }
    },
    consult() {
      //电话咨询弹窗
      this.isconsult = true
    },
    consultClose() {
      //电话咨询弹窗关闭
      this.isconsult = false
    },
    bolting() {
      // 查询房屋列表
      this.HousesLists()
    },
    reload() {
      console.log('重新加载')
      this.screenForms = {
        buildingType: 'complex_building',
        current: 1,
        projectUnitPrice: [],
        projectArea: [],
        projectDirection: []
        }
      this.HousesLists()
    },
    async HousesLists() {
      let that = this
      console.log(that.screenForms);
      const { data: res } = await that.$http.get('/rentserver/project/building/page', {
        params: that.screenForms
      })
      // console.log(res)
      that.tableData = res.data.records
      console.log(that.tableData)
      this.total = res.data.total
      // console.log(that.total)
      if (res.code !== 0) {
        return that.$message.error('获取房屋信息失败！')
      }
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    async coupon() {
      let that = this
      let id = getItem('XIE_XIN').user_id;
      let companyId = getItem('USER_INFO').data.data.companyId
      let params ={
        id : companyId
      }
      const { data: res } = await that.$http.get(`/config/sysCouponInfo/company/${id}`, {
        params: params
      })
      console.log(res)
      
      
      // that.tableData = res.data.records
      // console.log(that.tableData)
      // this.total = res.data.total
      // console.log(that.total)
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
      that.sysCouponInfo = res.data;
      if(res.data.length > 0){
        that.coupons = true
      }else{
        that.coupons = false
      }
      this.couponName()
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    async dictionaries() {
      let that = this;
      let type= 'coupon_type';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      console.log('字典2')
      console.log(res)
      // that.tableData = res.data.records
      // console.log(that.tableData)
      // this.total = res.data.total
      // console.log(that.total)
      
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
      this.dict = res.data;
      this.couponName()
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    //确定 渲染的优惠券名称
    couponName(){
      let that = this;
      // that.sysCouponInfo
      // that.dict
      that.dict.forEach(row => {
        // this.totalArea += row.projectArea
        if(that.sysCouponInfo.length > 0){
          if(row.label == that.sysCouponInfo[0].type){
            this.sysCouponInfoname = row.value;
            // console.log(row);
          }
        }
        
      })
    },
    async marketService(){
      let that = this;
      let type= 'market_service ';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      that.bazaar = res.data
      console.log(res);
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    toggleSelection() {
      !this.allChecked
      if (this.allChecked) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleAllSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    toggleAllSelection(val) {
      this.multipleSelection = val
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length == this.tableData.length) {
        this.allChecked = true;
      }else{
        this.allChecked = false;
      }
      // console.log('选中项' + this.multipleSelection)
      this.floornum = this.multipleSelection.length
      this.totalArea = 0
      this.multipleSelection.forEach(row => {
        this.totalArea += row.projectArea
      })
      this.totalArea = this.totalArea.toFixed(2);

      console.log(this.totalArea);
    },
    handleShow() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          type: 'warning',
          offset: 200,
          message: `请选择需要预约的房间`
        })
        return
      }
      if (this.isauth) {
        this.dialogVisible = true
        this.chooesHoseId = []
        this.multipleSelection.forEach(e => {
          this.lookApartment.push(e.projectName)
          this.chooesHoseId.push(e.id)
        })
        this.form.projectIds = this.chooesHoseId
        //获取用户个人信息
        //缺一个条件判断
        let companyId = getItem('USER_INFO').data.data.companyId
        let isCompany = getItem('USER_INFO').data.data.isCompany
        let isPerson = getItem('USER_INFO').data.data.isPerson
        let companyName = getItem('USER_INFO').data.data.companyName
        let person = getItem('USER_INFO').data.data.person.idName
        let userid = getItem('XIE_XIN').user_id
        console.log(companyId, +'公司id')
        if (isCompany == '1') {
          this.form.userType = '2'
          this.form.companyId = companyId
          this.form.userId = ''
          this.form.companyName = companyName
        }
        if (isPerson == '1') {
          this.form.userType = '1'
          this.form.userId = userid
          this.form.companyId = ''
          this.form.companyName = person
        }
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: `请先进行个人认证`
        })
      }
    },
    handleClose() {
      this.form={}
      this.dialogVisible = false
      this.lookApartment = []
      this.chooesHoseId = []
    },
    // 判断是否已经认证
    async isauths() {
      let that = this
      let id = getItem('XIE_XIN').user_id
      let parentId = getItem('USER_INFO').data.data.parentId
      const { data: res } = await that.$http.get(`/account/sysuser/isauth/${id}`, {
        params: parentId
      })
      this.isauth = res.data
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log(this.form)
          let data = this.form
          const { data: res } = await this.$http.post('/order/webAppointment/add', {
            ...data
          })
          if (res.code == 0) {
            this.$message({
              message: '恭喜您，预约成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          }
          this.dialogVisible = false
          this.lookApartment = []
          this.form={}
          this.chooesHoseId = []
        } else {
          return this.$message({
            type: 'warning',
            offset: 200,
            message: `请根据条件填写信息`
          })
        }
      })
    },
    sizeChange(val) {
      console.log(`每页有${val}条数据`)
      this.screenForms.size = val
      this.HousesLists()
    },
    currentChange(val) {
      console.log(`当前页: ${val}`)
      this.screenForms.current = val
      this.HousesLists()
    },
    confirm() {
      let that = this
      if (that.isauth == true) {
        if (that.multipleSelection.length !== 0) {
          that.multipleSelection.forEach(e => {
            that.chooesHoseId.push(e.id)
          })
          
          console.log('选中的房屋id集合',that.chooesHoseId)
          setItem('HousesChooesLists', that.chooesHoseId)
          that.$router.push({ path: '/orderInformation' })
          // this.$router.push({ name: 'orderInformation', params: { id: 9898 } })
          return
        }
        that.$message({
          type: 'warning',
          offset: 200,
          message: `请选择房屋查看`
        })
      } else {
        that.$message({
          type: 'warning',
          offset: 200,
          message: `请完成个人认证或者企业认证`
        })
      }

      // console.log(that.InspectingHouse[0])
    }
  }
}
</script>
<style lang="less" scoped>
.houseRent {
  position: relative;
  margin: 40px auto;
  .Rent {
      font-size: 24px;
      color: #333;
    }
  .screenCondition{
    margin: 20px auto;
    border: 1px solid #e8e5e5;
    .form {
      font-size: 24px;
      color: #666;
    }
    .area{
      border-radius: 4px;
      margin: auto 20px ;
      border-bottom: 1px solid #e8e5e5;
    }
    .el-form-item{
      margin-bottom: 0px;
    }
  }
  .content-top {
    .Rent {
      font-size: 20px;
      color: #333;
      padding: 20px 0;
      border-bottom: 1px solid #e8e5e5;
    }
    .form {
      font-size: 15px;
      color: #666;
    }
  }
  .content-bottom {
    margin-top: 20px;
    .housingIntroduced {
      display: flex;
      justify-content: space-between;
      height: 170px;
      .housingIntroduced-left {
        text-align: left;
        width: 900px;
        display: inline-block;
        position: relative;
        .choos-left {
          display: inline-block;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        .jdp {
          margin-left: 30px;
          margin-top: 20px;
          width: 200px;
          height: 130px;
          margin-right: 20px;
        }
        .characters {
          display: inline-block;
          margin-left: 25px;
          position: absolute;
          top: 20px;
          p {
            font-size: 14px;
            color: #000;
            margin: 10px 0;
          }
          .biaoti {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            .discounts {
              // width: auto;
              // height: 30px;
              // line-height: 26px;
              font-size: 12px;
              color: #fff;
              margin:  auto 8px;
              padding: 4px;
              border-radius : 4px;
              background-color: #ce0d24;
            }
          }
          .leixin{
            font-size: 14px;
            color: #8D919B;
            .span{
              margin-right: 8px;
              margin-left: 8px;
            }
          }
          .stages{
            padding-top: 10px;
          }
          .installment {
            color: #eb5f00;
            margin:  auto 8px;
            padding: 4px;
            background-color: #FAF6EB;
          }
          .bazaar {
            text-decoration: none;
            color: #4EA5FF;
            margin:  auto 8px;
            padding: 4px;
            background-color: #EDF5FA;
          }
        }
      }
      .housingIntroduced-rgiht {
        margin-top: 20px;
        padding-right: 20px;
        p {
          font-size: 14px;
          color: #555;
          margin: 10px 0;
        }
        .headline {
          font-size: 14px;
          color: #FF5757;
          font-weight: bold;
          text-align: right;
          .price{
            font-size: 18px;
          }
        }
        .discounts {
          font-size: 12px;
          color: #AAAFBA;
        }
        // .marketService {
        //   background-color: #409eff;
        //   margin-right: 5px;
        // }
        // .installment {
        //   color: #eb5f00;
        //   margin-right: 5px;
        // }
      }
    }
  }
  .selectAll{
      margin: 5px auto;
      border-bottom: 1px solid #e8e5e5;
    }
  .paginationdiv{
    height: 50px;
    .pagination {
      position: absolute;
      right: 0;
      margin: 10px;
    }
  }
  
  .suspensionAll{
    // background:#DADBDB;
    // width: 100%;
    // height: 50px;
  
    .suspension {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 60px;
      width: 100%;
      z-index: 999;
      background-color: #DADBDB;
      .suspension-left {
        position: absolute;
        top: 20px;
        left: 360px;
      }
      .suspension-middle {
        position: absolute;
        top: 20px;
        left: 500px;
        
      }
      .suspension-right {
        position: absolute;
        top: 20px;
        right: 400px;
        button {
          background-color: #409eff;
          width: 87px;
          height: 28px;
          border: 0;
          margin-left: 10px;
          color: #fff;
          border-radius: 5%;
        }
      }
    }
  }
  .housingContract {
    font-size: 13px;
    color: #333;
    padding: 5px;
    background-color: #eee;
    margin-right: 20px;
    white-space: nowrap;
  }
  // .el-table td, .el-table th {
  //   text-align: left;
  // }
}
.iscenter{
  width: 70%;
  margin: 0 auto;
  .bnt{
    text-align: center;
  }
  .formsty{
     margin: 0 auto;
  }
  
}
.centerx{
  margin-top:10%;
  .isconsulty{
    width: 100%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
}
</style>
